<template>
    <div class="first bor">
        <div class="head flex b">
            <span class="f15">首页实付金额</span>
            <span class="f14">￥
                {{ isShow ? payments.pay_rent
                        ? payments.pay_rent
                        : payments.first_rent
                        : payments.first_paid_rent
                }}
            </span>
        </div>
        <div class="all-price f14">
            <div class="item flex">
                <span class="bold">总租金</span>
                <span>
                    ￥{{ isShow ? payments.total_rent : payments.rent_total }}
                    (共{{ isShow ? payments.total_num : payments.month_total }}期)
                </span>
            </div>
            <div class="item flex">
                <span>首期租金</span>
                <span>￥{{ payments.first_rent }}(第1期)</span>
            </div>
            <div class="item flex">
                <span>剩余租金</span>
                <span>￥{{ payments.last_rent }}(共{{ payments.last_term }}期)</span>
            </div>
            <!-- start 以下确定订单页面才会显示 -->
            <div class="item flex red" v-if="payments.activity_title">
                <span>{{ payments.activity_title }}</span>
                <span>领券></span>
            </div>
            <div class="item flex red" v-if="payments.pay_code">
                <span>优惠抵扣</span>
                <span>￥{{ payments.pay_code }}</span>
            </div>
            <!-- end -->
        </div>
        <div class="detail flex" @click="detailHandle(payments.order_id)">
            <div class="left" v-if="isShow">
                <span class="title f15">租期详细</span>
                <span class="warning f12">自定义租期，每期租金金额不同</span>
            </div>
            <div class="left" v-else>
                <span class="title f15">账单详情</span>
            </div>
            <img src="@/assets/images/more.png">
        </div>
    </div>
</template>
<script>
export default {
    name: "",
    props: {
        isShow: {
            type: Boolean,
            default: true,
        },
        detailHandle: Function,
        payments: Object,
    },
    components: {

    },
    data() {
        return {
        }
    },
    methods: {

    }
}
</script>
<style lang="scss" scoped>
.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bor {
    border-radius: 8px;
    overflow: hidden;
}

.first {
    padding: 15px 10px;
    background-color: white;

    .head {
        span {
            &:nth-of-type(2) {
                color: #d13631;
            }
        }
    }

    .all-price {
        background-color: #f9f9f9;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 15px;

        .item {

            &:nth-of-type(2),
            &:nth-of-type(4) {
                margin: 10px 0;
            }

            span {
                color: #989898;
            }

            &.red {
                span {
                    color: #d13631;
                    font-weight: bold;
                }
            }
        }
    }

    .detail {
        .left {
            .title {
                margin-right: 5px;
            }

            .warning {
                color: #d29042;
            }
        }

        img {
            width: 6px;
            object-fit: contain;
        }
    }
}
</style>